<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Resource/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/Resource/js/jquery-3.3.1.js"></script>
    <script src="Resource/layui/layui.js" charset="utf-8"></script>
    <link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
    <script type="javascript">
        $('.layui-none', $(this.elem).next()).width($('.layui-table-header table', $(this.elem).next()).width() + 'px');
    </script>
    <style>
        #tab tr td{
            padding-top:10px;
            padding-left: 10px;
        }
        #xgdiv .layui-input{
            width: 200px;
            height: 30px;
        }
        #tab{
            margin-top: 5px;
            margin-left: -470px;
        }

        #image {
            position: absolute;
            top: -30px;
            left: 330px;
            background: url(image/icon1.png);
            width: 480px;
            height: 480px;
        }
        #foot{
            height: 50px;
            align-content: center;
            background: white;
        }
        #foot input{
            margin-left: 300px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<div style="display:none;background-repeat:no-repeat;" id="xgdiv">
    <form action="./updateFundHold" method="post">
        <div id="image" style="background-repeat:no-repeat;text-align: center;">
        </div>
        <div id="image2" style="background-repeat:no-repeat;text-align: center;">
        </div>
        <center>
            <table style="
               width: 350px;
                height: 450px;
                overflow-x: scroll;
                overflow-y: hidden;
                background-color: white;" class="layui-form" id="tab">
                <tr>
                    <td>基金持编号表：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="fhId" id="edit_fhId" readonly="readonly" type="text"
                                   required>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>基金编号：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="fId" id="edit_fId" type="text" required>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>账户信息编号：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="caId" id="edit_caId" type="text" required>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>份额：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input  class="layui-input" name="shares" id="edit_shares" type="text" required>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>持有日期：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="startTime" id="edit_startTime" type="text" required>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>数据更新时间：</td>
                    <td>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="dataUpdateTime" id="edit_dataUpdateTime" type="text" required>
                        </div>
                    </td>
                </tr>
            </table>
        </center>
        <div id="foot">
            <input style="width: 250px;background: #364150" class="layui-btn" type="submit" value="修改" />
        </div>
    </form>
</div>
<script type="text/html" id="toolbarDemo">
    <!-- 表单元素 -->
    <table class="layui-form" style="margin-top: 40px;">
        <tr>
            <td>
                <div class="layui-form-item" style="width: 260px;">
                    <label style="width: 130px;" class="layui-form-label">基金编号</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="fId" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input jjbh">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item" style="width: 260px;margin-left: 0px;">
                    <label style="width: 130px;" class="layui-form-label">账户信息编号</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="caId" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input zhxxbh">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item" style="width: 260px;margin-left: -40px;">
                    <label style="width: 130px;" class="layui-form-label">份额</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="shares" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input fe">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item" style="width: 260px;margin-left: -10px;">
                    <label style="width: 130px;" class="layui-form-label">持有日期</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="startTime" required lay-verify="required" id="test1" placeholder="请输入.." autocomplete="off" class="layui-input cysj">
                    </div>
                </div>
            </td>
            <td>
                <button type="button" id="searchTable" class="layui-btn layui-btn-primary" style="margin:0 0 16px 19px;border-radius:7px;">
                    <i class="layui-icon">&#xe615;</i></button>
            </td>
        </tr>
    </table>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="background:#BEBFAD"><i class="layui-icon">&#xe642;编辑</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"  style="background:#BB7B57"><i class="layui-icon">&#xe640;删除</i></a>
</script>
<script>
    layui.use(['table','laydate','element'], function(){
        var table = layui.table;
        var element = layui.element;
        var laydate = layui.laydate;
        table.render({
            elem: '#test'
            ,url:'./selectFundHold'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }],
            limits: [3, 5, 10, 20],
            limit: 11,
            method: "POST",
            done:function () {
                layui.use(['laydate'], function(){
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#test1',
                        trigger: 'click',
                        isInitValue: false,
                        theme: '#2c78da',
                        type:'datetime'
                    });
                });
            },
            height:625,
            id:'testReload',
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
            ,title: '用户数据表'
            ,cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                },
                    {
                        field: 'fhId',
                        title: '基金持有编号',
                        align: 'center',
                    },
                    {
                        field: 'fId',
                        title: '基金编号',
                        align: 'center',
                    },
                    {
                        field: 'caId',
                        title: '账户信息编号',
                        align: 'center',
                    },
                    {
                        field: 'shares',
                        title: '份额',
                        align: 'center',
                    },
                    {
                        field: 'startTime',
                        title: '持有日期',
                        align: 'center',
                    },
                    {
                        field: 'dataUpdateTime',
                        title: '数据更新时间',
                        templet : "<div>{" +
                            "{" +
                            "   d.dataUpdateTime == null ?  '' : d.dataUpdateTime.split(\" \")[0]" +
                            "}" +
                            "}</div>",
                        align: 'center',
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo',
                        width: 180,
                    },
                ]]
            ,page: true,
            parseData: function(res) { //res 即为原始返回的数据
                console.log(res);
                var current_pages;
                //第一次显示的时候this.page=true，把这种情况单独列出
                if (this.page === true) current_pages = 1;
                else current_pages = this.page.curr;
                //根据分页要求选出需要显示的数据
                var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.length,
                    "data": data
                }
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var jsonData = JSON.stringify(data);
            if (layEvent === 'edit') {
                layer.open({
                    title:"<div style='    width: 1000px;\n" +
                        "    background: #364150;\n" +
                        "    margin-left: -20px;\n" +
                        "    color: white;padding-left: 20px;'>基金公司信息修改</div>",
                    type: 1,
                    area: ['897px', '552px'],
                    skin: 'layui-layer-molv',
                    shadeClose: true,
                    content: $('#xgdiv'),
                    success: function(layero, index) {
                        $("#edit_fhId").val(data.fhId);
                        $("#edit_fId").val(data.fId);
                        $("#edit_caId").val(data.caId);
                        $("#edit_shares").val(data.shares);
                        $("#edit_startTime").val(data.startTime);
                        $("#edit_dataUpdateTime").val(data.dataUpdateTime.split(" ")[0]);
                    },
                });
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    location.href = "./deleteFundHold?fhId=" + data.fhId; //跳转到Servlet
                });
            }
        });
        $('body').on('click', '#searchTable', function() {
            var input1 = $(".jjbh").val();
            var input2 = $(".zhxxbh").val();
            var input3 = $(".fe").val();
            var input4 = $(".cysj").val();
            table.reload('testReload', {
                url: './selectDimFundHold',
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                where: {
                    fId: input1,
                    caId: input2,
                    shares: input3,
                    startTime: input4
                },
                page: {
                    curr: 1
                }
            });
        });
    });
</script>
</body>
</html>
